<!DOCTYPE html>
<html>
<head lang="zh-cn">
    <link href="$!{__beat.server.contextPath}/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="$!{__beat.server.contextPath}/bootstrap/datepicker/datepicker3.css" rel="stylesheet">
    <link rel="stylesheet" href="$!{__beat.server.contextPath}/bootstrap/css/App.css" type="text/css" />
<style type="text/css">
        .table-center{
            text-align:center;
        }
        .table-center>tbody>tr>td{
            padding: 3px 10px;
        }
</style>
    <meta charset="UTF-8">
    <title>收入数据看板</title>
</head>
<body>
<div class="container-fluid">

    <div class="row" align="center" style="margin-bottom:8px; margin-top:5px;">
                <form class="form-inline" action="$!{__beat.server.contextPath}/income/citycate" method="post">
                        <div class="form-group" style="width:180px">
                            <label for="businessName" style="padding-left:15px;">业务线：</label>
                            <select id="businessName" name="businessName" class="form-control input-sm" style="align:center; width:100px; ">
                               #foreach($buss in $businessList)
                               #set($i = $velocityCount - 1)
                                    <option value="$buss" #if("$buss" == $!businessName) selected #end>$business_CN_Map.get("$buss")</option>
                                #end
                            </select>
                        </div>  
                        <div class="form-group">                       
                               <input type="submit" value="查询" class="btn btn-primary btn-xs"> 
                        </div>
                </form>
    </div>

    <div class="panel panel-default">
        <div class="panel-heading">$!{cityName}$!{businessName_CN}收入</div>
        <div class="panel-body" style="height: 700px">
            <div id='cityProOption' dateGrp='stat_date' statType='day' indexType='北京'>
                <form class="form-inline">
                    <div  class="input-group input-group-sm" style="width: 20%;float: left">
                        <span class="input-group-addon">
                            <input id="time_checkbox_cityPro" type="checkbox">
                        </span>
                        <input id="time_input_cityPro" type="text" class="form-control time" placeholder="添加对比" disabled>
                    </div>

                    <div class="input-group input-group-s" style="margin-left: 26.5%">
                        <select id="index_cityPro" class="form-control  input-sm">
                             #foreach($c in $zhixiaoCityList)
                                 <option value="$c">$c</option>
                                #end
                        </select>
                    </div>    

                    <div class="btn-group btn-group-sm btn-tab" role="group" aria-label="Basic example"  style="float: right">
                        <button type="button" class="btn btn-default active btnCityPro" dateGrp='stat_date' statType='day'>日</button>
                        <button type="button" class="btn btn-default btnCityPro" dateGrp='week_begin' statType='week'>周</button>
                        <button type="button" class="btn btn-default btnCityPro" dateGrp='month_num' statType='month'>月</button>
                    </div>
                </form>
            </div>

            <div  style="height:600px">
                <div id="cityCash" style="height:300px;margin-bottom:1px;padding:1px 10px;border-width:0 1px;"></div>
                <div id="cityCus" style="height:300px;padding-top:1px;border-top-width:0"></div>
            </div>
        </div>

        <div class="panel-group accordion" id="accordion">
            <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a class="accordion-toggle" data-toggle="collapse" data-parent=".accordion" href="#collapseOne">
                            直销城市明细(点击展开)
                            </a>
                        </h4>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse">
                        <div class="panel-body">
                            <table class="table table-bordered" id="cityProTable">
                                <thead>
                                  <tr>
                                    <th>城市</th>
                                    <th>精准现金</th>
                                    <th>环比</th>
                                    <th>精准客户数</th>
                                    <th>精准现金</th>
                                    <th>环比</th>
                                    <th>精准客户数</th>
                                    <th>精准现金</th>
                                    <th>环比</th>
                                    <th>精准客户数</th>
                                    <th>城市PV</th>
                                    <th>流量变现率</th>
                                    <th>客户充实度</th>
                                  </tr>
                                </thead>

                            </table>
                        </div>
                    </div>
            </div>
        </div>

    <br/>
    </div>



    <div class="panel panel-default">
        <div class="panel-heading">$!{businessName_CN}城市收入对比</div>
        <div class="panel-body" style="height: 700px">
            <div id='cityCmpOption' dateGrp='stat_date' statType='day'>
                <form class="form-inline">

                    <div class="form-group" style="width:200px;margin-left:20%">
                        <label for="cityCmp_citys">城市：</label>
                        <input type="hidden" name="cityCmp_citys" id="cityCmp_citys" value="$!cityCmp_citys" /> 
                        <select multiple="multiple"  id="cityCmp_mul" class="form-control  input-sm">              
                                #foreach($!{city} in ${zhixiaoCityList})
                                    <option value="$!{city}" #if ($cityCmp_citys.contains("$!{city}")) selected="selected" #end >
                                        $!{city}
                                    </option>
                                #end
                        </select>  
                    </div>

                    <div class="form-group input-group input-group-sm" style="margin-left: 15px">
                        <label for="proType" style="padding-right: 10px;">产品：</label>
                        <label class="radio-inline"><input type="radio" name="proType" id="proType" value="jingzhun" checked="checked" />精准</label>
                        <label class="radio-inline"><input type="radio" name="proType" id="proType" value="zhiding"/>置顶</label>
                        <label class="radio-inline"><input type="radio" name="proType" id="proType" value="zhineng"/>智能</label>
                    </div> 

                    <button id="refreshCityCmp_btn" type="button" class="btn btn-default form-control input-sm">刷新</button>

                    <div class="btn-group btn-group-sm btn-tab" role="group" aria-label="Basic example"  style="float: right">
                        <button type="button" class="btn btn-default active btnCityCmp" dateGrp='stat_date' statType='day'>日</button>
                        <button type="button" class="btn btn-default btnCityCmp" dateGrp='week_begin' statType='week'>周</button>
                        <button type="button" class="btn btn-default btnCityCmp" dateGrp='month_num' statType='month'>月</button>
                    </div>
                </form>
            </div>

            <div  style="height:600px">
                <div id="cityCmpCash" style="height:300px;margin-bottom:1px;padding:1px 10px;border-width:0 1px;"></div>
                <div id="cityCmpCus" style="height:300px;padding-top:1px;border-top-width:0"></div>
            </div>
        </div>

        <div class="panel-group accordion" id="accordion">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a class="accordion-toggle" data-toggle="collapse" data-parent=".accordion" href="#collapseTwo">
                        直销城市明细(点击展开)
                        </a>
                    </h4>
                </div>
                <div id="collapseTwo" class="panel-collapse collapse">
                    <div class="panel-body">
                        <table class="table table-bordered" id="cityCmpTable">
                            <thead>
                              <tr>
                                <th>城市</th>
                                <th>精准现金</th>
                                <th>环比</th>
                                <th>精准客户数</th>
                                <th>精准现金</th>
                                <th>环比</th>
                                <th>精准客户数</th>
                                <th>精准现金</th>
                                <th>环比</th>
                                <th>精准客户数</th>
                                <th>城市PV</th>
                                <th>流量变现率</th>
                                <th>客户充实度</th>
                              </tr>
                            </thead>

                        </table>
                    </div>
                </div>
            </div>
        </div>
    <br/>
    </div>


    <div class="panel panel-default">
        <div class="panel-heading">$!{businessName_CN}城市消耗周期</div>
        <div class="panel-body" style="height: 700px">
            <div id='consumCityOpt' dateGrp='stat_date' statType='day'>
                <form class="form-inline">

                    <div class="form-group" style="width:200px;margin-left:20%">
                        <label for="consume_citys">城市：</label>
                        <input type="hidden" name="consume_citys" id="consume_citys" value="$!cityCmp_citys" /> 
                        <select multiple="multiple"  id="consume_city_mul" class="form-control  input-sm">              
                                #foreach($!{city} in ${zhixiaoCityList})
                                    <option value="$!{city}" #if ($cityCmp_citys.contains("$!{city}")) selected="selected" #end >
                                        $!{city}
                                    </option>
                                #end
                        </select>  
                    </div>

                    <div class="form-group" style="width:250px;margin-left: 15px">
                        <label for="consume_city_indexs">指标：</label>
                        <input type="hidden" name="consume_city_indexs" id="consume_city_indexs" value="$!consume_city_indexs" /> 
                        <select multiple="multiple"  id="consCity_index_mul" class="form-control  input-sm" style="width:180px;">              
                            <option value="xhzq" #if ($consume_city_indexs.contains("xhzq")) selected="selected" #end >消耗周期</option>
                            <option value="xiaohao" #if ($consume_city_indexs.contains("xiaohao")) selected="selected" #end >消耗</option>
                            <option value="balance" #if ($consume_city_indexs.contains("balance")) selected="selected" #end >余额</option>
                            <option value="chongzhi" #if ($consume_city_indexs.contains("chongzhi")) selected="selected" #end >充值</option>
                        </select>  
                    </div>

                    <button id="refreshConsumeCity_btn" type="button" class="btn btn-default form-control input-sm">刷新</button>

                    <div class="btn-group btn-group-sm btn-tab" role="group" aria-label="Basic example"  style="float: right">
                        <button type="button" class="btn btn-default active btnConsumeCity" dateGrp='stat_date' statType='day'>日</button>
                        <button type="button" class="btn btn-default btnConsumeCity" dateGrp='week_begin' statType='week'>周</button>
                        <button type="button" class="btn btn-default btnConsumeCity" dateGrp='month_num' statType='month'>月</button>
                    </div>
                </form>
            </div>

            <div  style="height:600px">
                <div id="consumeCityOne" style="height:300px;margin-bottom:1px;padding:1px 10px;border-width:0 1px;"></div>
                <div id="consumeCityTwo" style="height:300px;padding-top:1px;border-top-width:0"></div>
            </div>
        </div>

        <div class="panel-group accordion" id="accordion">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a class="accordion-toggle" data-toggle="collapse" data-parent=".accordion" href="#collapseThree">
                        直销城市明细(点击展开)
                        </a>
                    </h4>
                </div>
                <div id="collapseThree" class="panel-collapse collapse">
                    <div class="panel-body">
                        <table class="table table-bordered" id="consumeCityTable">
                            <thead>
                              <tr>
                                    <th>城市</th>
                                    <th>余额</th>
                                    <th>环比</th>
                                    <th>消耗</th>
                                    <th>环比</th>
                                    <th>充值</th>
                                    <th>环比</th>
                                    <th>消耗周期</th>
                                    <th>环比</th>
                              </tr>
                            </thead>

                        </table>
                    </div>
                </div>
            </div>
        </div>
    <br/>
    </div>

</div>
</body>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="$!{__beat.server.contextPath}/bootstrap/libs/jquery-ui/jquery-ui-1.9.2.custom.css" type="text/css" /> 
<link type="text/css" href="$!{__beat.server.contextPath}/bootstrap/libs/jquery-ui/jquery.multiselect.css" rel="stylesheet" />
<script src="$!{__beat.server.contextPath}/bootstrap/libs/jquery-ui/jquery-ui-1.9.2.custom.min.js"></script>
<script type="text/javascript" src="$!{__beat.server.contextPath}/bootstrap/libs/jquery-ui/jquery.multiselect.js"></script>

<script src="$!{__beat.server.contextPath}/bootstrap/js/libs/bootstrap.js"></script>
<script src="$!{__beat.server.contextPath}/bootstrap/datepicker/bootstrap-datepicker.js"></script>
<script src="$!{__beat.server.contextPath}/bootstrap/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
<script src="$!{__beat.server.contextPath}/echarts2/source/echarts.js"></script>
<script type="text/javascript">
    var cate = "$!{businessName}";
    var dayMap={1:"周一",2:"周二",3:"周三",4:"周四",5:"周五",6:"周六",0:"周日"};
    var datepicker_op={
        format: "yyyy-mm-dd",
        clearBtn: false,
        language: "zh-CN",
        autoclose: true,
        todayHighlight: true,
        minViewMode:0,
        orientation: "top left"
    };

    function getDate(yyyymmdd){
        if(yyyymmdd.length==10){        //yyyy-MM-dd
            return Date.parse(yyyymmdd.substr(0,4)+'/'+yyyymmdd.substr(5,2)+'/'+yyyymmdd.substr(8,2));
        }else if(yyyymmdd.length==8){   //yyyyMMdd
            return Date.parse(yyyymmdd.substr(0,4)+'/'+yyyymmdd.substr(4,2)+'/'+yyyymmdd.substr(6,2));
        }else if(yyyymmdd.length==6){    //yyyyMM
            return Date.parse(yyyymmdd.substr(0,4)+'/'+yyyymmdd.substr(4,2));
        }
    }

    //获取星期几 dayDate 的格式为 yyyy-MM-dd
    function getWeekDay(dayDate){
        var jsDate = new Date(Date.parse(dayDate.replace(/\-/g,'/')));
        var weekNumber = jsDate.getDay();
        return dayMap[weekNumber];
    }

    function setDatePicker(ec,dateGrp,input){
        if('week_begin'==dateGrp){
        }else if('month_num'==dateGrp){
            datepicker_op.minViewMode=1;
            datepicker_op.format='yyyy-mm';
        }else{
            datepicker_op.minViewMode=0; 
            datepicker_op.format='yyyy-mm-dd';
        }
        input.datepicker('remove');
        input.datepicker(datepicker_op);
        //获取显示的日期数组
        var days_show=ec.getShowDays();
        var days_all=ec.getAllDays();
        //设置时间可选范围
        input.datepicker('setStartDate',new Date(getDate(days_all[0])));
        input.datepicker('setEndDate',new Date(getDate(days_all[days_all.length-days_show.length])));
    }


    //格式化输出数字
    function format_number(n){
        var b=parseInt(n).toString(); 
        var len=b.length; 
        if(len<=3){return b;} 
        var r=len%3; 
        return r>0?b.slice(0,r)+","+b.slice(r,len).match(/\d{3}/g).join(","):b.slice(r,len).match(/\d{3}/g).join(","); 
    };

    //加百分号和样式
    function getRate(floatNum){
         var s=floatNum.toFixed(2)+"%";
         if(floatNum > 0){
            return '<td class="text-success">' + s + '<span class="glyphicon glyphicon-arrow-up"></span></td>';
         }else if(floatNum < 0){
             return '<td class="text-danger">' + s + '<span class="glyphicon glyphicon-arrow-down"></span></td>';
         }else{
            return '<td>' + s + '</td>';
         }
    }  
    function changeDateGrp(item){
        var dateGrpVal = $(item).attr('dateGrp');
        var stat_type = $(item).attr('statType');
        var curDiv = $(item).closest('div[dateGrp]');
        $(curDiv).attr('dateGrp',dateGrpVal).attr('statType',stat_type);
    }

    function changeIndex(item){
        var indexVal = $(item).val();
        var curDiv = $(item).closest('div[dateGrp]');
        $(curDiv).attr('indexType',indexVal);
    }

    $('.btn-tab button').click(function(e){
        $(this).addClass('active');
        $(this).siblings('button').each(function(){
            $(this).removeClass('active');
        });
    });
   
 
    // 路径配置
    require.config({paths: {echarts: "$!{__beat.server.contextPath}/echarts2/dist",dashboard: "$!{__beat.server.contextPath}/js/income"}});
    
    var charts = [];
     //城市各产品线趋势图
    require(['dashboard/income_citypro_v0'],function(cityProEC){
        charts.push(cityProEC);
        cityProEC.show(cate,2);
    });

     //产品城市对比趋势图
    require(['dashboard/income_citycmp_v0'],function(cityCmpEC){
        charts.push(cityCmpEC);
        cityCmpEC.show(cate,2);
    });


    $(function(){
        $("#consume_city_mul").multiselect({
            header:false,
            height:300,
            minWidth:140,
            noneSelectedText: "--请选择--",
            checkAllText: "disabled",
            uncheckAllText: '清空',
            selectedList:2,
            click: function(event, ui){
                var array_of_checked_values = $("#consume_city_mul").multiselect("getChecked").map(function(){
                   return this.value;    
                }).get();
                var warning = $(".message");
                if(array_of_checked_values.length > 3){
                    return false;
                }
                 $("#consume_citys").val(array_of_checked_values.join(","));
            },
            uncheckAll: function(){
                $("#consume_citys").val('');
            },
            selectedText: function(numChecked, numTotal, checkedItems){
                var two='';
                /*
                    js数组的map方法和 $.map(arr,callback)将一个数组中的元素转换到另一个数组中;
                    $(selector).map(arr,callback)返回jquery对象 $(selector).map(arr,callback).get()使用 get() 来处理返回的对象以得到基础的数组
                */
               if(numChecked > 3){
                        return false;
                }               
                var idcs=checkedItems.map(function(element){
                    return element.value; 
                }).join(' , ');

                return idcs;
            }
       });
    }); 

    $(function(){
        $("#consCity_index_mul").multiselect({
            header:false,
            height:120,
            minWidth:140,
            noneSelectedText: "--请选择--",
            checkAllText: "disabled",
            uncheckAllText: '清空',
            selectedList:2,
            click: function(event, ui){
                var array_of_checked_values = $("#consCity_index_mul").multiselect("getChecked").map(function(){
                   return this.value;    
                }).get();
                var warning = $(".message");
                if(array_of_checked_values.length > 2){
                    return false;
                }
                $("#consume_city_indexs").val(array_of_checked_values.join(","));
            },
            uncheckAll: function(){
                $("#consume_city_indexs").val('');
            },
            selectedText: function(numChecked, numTotal, checkedItems){
               if(numChecked > 2){
                    return false;
                }               
                var idcs=checkedItems.map(function(element){
                    // console.log(element.labels[0].innerText);
                    return element.labels[0].innerText; 
                }).join(',');
                // $("#consume_city_indexs").val(idcs);
                return idcs;
            }
       });
    });

     //城市消耗周期
    require(['dashboard/income_consume_city_v0'],function(cityConsumeEC){
        charts.push(cityConsumeEC);
        cityConsumeEC.show(cate,2);
    });


    $(window).resize(function(){
        $.each(charts,function(i,n){
            n.resize();
        });
    });


</script>
</html>